<template>
  <div class="dark">
    <el-switch
      v-model="isDark"
      :active-action-icon="Moon"
      :inactive-action-icon="Sunny"
      size="large"
    />
  </div>
</template>

<script setup>
import { useDark, useToggle } from "@vueuse/core"; // vue 工具库
import { Moon, Sunny } from "@element-plus/icons-vue";

// 当为暗黑模式时候 isDark 为 true，否则为 false
const isDark = useDark();
useToggle(isDark);

// toggleDark();  这个函数给我弄懵逼了,没刷新一次就切换一次暗黑 chao
</script>

<style scoped></style>
